<template>
  <div>
    <Echart
      ref="echart"
      :options="options"
      id="bottomLeftChart"
      :height="height"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "../echart/index.vue";
import ChartsMixins from "@/utils/newJs/chartsMixins";
export default {
  mixins: [ChartsMixins],
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    barTwoYInfo: {
      type: Object,
      default: () => ({}),
    },
    index: { Number },
    height: String,
    title: String,
  },
  watch: {
    barTwoYInfo: {
      handler(newData) {
        // console.log(newData, "newData");
        //显示个数
        let ZoomNum = 6;
        if (newData.ZoomNum != undefined) {
          ZoomNum = newData.ZoomNum[this.index];
        }
        //图到顶端的距离
        let gridTop = "25%";
        if (newData.gridTop != undefined) {
          gridTop = newData.gridTop[this.index];
        }
        this.options = {
          color: newData.color[this.index],
          title: {
            text: this.title == undefined ? "" : this.title,
            top: "2%",
            left: "1%",
            textStyle: {
              color: "#000",
              fontSize: this.transformFontSize(16),
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              axis: "auto",
              snap: true,
            },
            showContent: true,
            enterable: true,
            extraCssText: "max-height:65%;overflow:auto",
            formatter: (format) => {
              var result = `
              <div
                  style="height:100%;
                  min-height:${30 + 28 * format.length}px;
                  width:${format[0].name.length * 12} + 'px;";
                  margin-left:-20px;
                  margin-top:-20px;
                  position:absolute;
                  z-index:-1;
                  "
                >
                <div
                  style="width: 100%;
                    height: 30px;
                    padding-left:10px;
                    font-size: 14px;
                    line-height: 30px;
                    color: #000;
                  "
                >
                 ${name ? name : format[0].name}
                </div>
                <div
                  style="
                      height: 100%;
                      padding-left:10px;
                      width: 100%;
                      border-radius: 3px;
                  "
                >
              `;
              // 动态添加dom单位
              format.map((item, index) => {
                // console.log(item, index, "///");
                if (item.seriesName.substring(0, 6) == "series") {
                  return;
                } else {
                  let name = item.seriesName + " : ";
                  result +=
                    "<div style='height: 28px;line-height:28px;'>" +
                    '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
                    item.color +
                    '"></span>' +
                    name +
                    item.value +
                    newData.tooltipFormatter[this.index][index];
                }
              });
              result += "</div>";
              return result;
            },
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "5%",
            top: gridTop,
            containLabel: true,
          },
          legend: {
            left: "center",
            top: "4%",
            textStyle: {
              color: "#000",
              fontSize: this.transformFontSize(14),
            },
            itemHeight: this.transformFontSize(14),
            itemWidth: this.transformFontSize(20),
          },
          xAxis: {
            type: "category",
            data: newData.xData[this.index],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#000",
                fontSize: this.transformFontSize(12),
              },
              formatter: (value, index) => {
                return value;
                //Reject图x轴格式化
                // if (newData.chartName != undefined) {
                //   if (newData.chartName[this.index] == "Reject") {
                //     // return value.split("-")[1] + "/" + value.split("-")[2];
                //     return value;
                //   } else {
                //     return value;
                //   }
                // } else {
                //   return value;
                // }
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: true,
            },
            // boundaryGap: false,
          },
          yAxis: [
            {
              type: "value",
              name: newData.yAxis[this.index][0],
              splitLine: {
                show: true, // 显示间隔线
                lineStyle: {
                  color: "#ddd", // 线条颜色
                  type: "dashed", // 线条类型，这里是虚线
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#000",
                  fontSize: this.transformFontSize(13),
                },
              },
              axisLine: {
                symbol: [
                  "none",
                  "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 ",
                ],
                symbolSize: [32, 30],
                symbolOffset: 0,
                show: true,
                lineStyle: {
                  color: "#000",
                },
              },
              axisTick: {
                show: true,
              },
            },
            {
              type: "value",
              name: newData.yAxis[this.index][1],
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#000",
                },
              },
              axisLine: {
                symbol: [
                  "none",
                  "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 ",
                ],
                symbolSize: [32, 30],
                symbolOffset: 0,
                show: true,
                lineStyle: {
                  color: "#000",
                },
              },
              axisTick: {
                show: true,
              },
            },
          ],
          dataZoom: [
            {
              // type: "slider",
              // show: true,
              // start: 100 - (ZoomNum / newData.xData[this.index].length) * 100, //默认为0
              // end: 100, //默认为100
              // // startValue: 50, // 从头开始
              // endValue: ZoomNum, // 一次性展示
              // xAxisIndex: [0],
              // // handleSize: 0, //滑动条的 左右2个滑动条的大小
              // height: 10, //组件高度
              // bottom: 0,
              // borderColor: "#e3e3e3",
              // fillerColor: "red", // 选中范围的填充颜色
              // borderRadius: 10,
              // backgroundColor: "#e3e3e3", //两边未选中的滑动条区域的颜色
              // showDataShadow: false, //是否显示数据阴影 默认auto
              // showDetail: false, //拖拽时候是否显示详细数值信息
              // realtime: true, //是否实时更新
              // filterMode: "filter", //y轴范围自适应
              // // zlevel: 10,
              // show: true,
              // **************************************************
              type: "slider",
              show: true,
              start: 100 - (ZoomNum / newData.xData[this.index].length) * 100, //默认为0
              end: 100, //默认为100
              // startValue: 50, // 从头开始
              endValue: ZoomNum, // 一次性展示
              xAxisIndex: [0],
              // handleSize: 0, //滑动条的 左右2个滑动条的大小
              height: 0, //组件高度
              bottom: 12,
              //borderColor: "red",
              fillerColor: "#409EFF", //选中颜色
              borderRadius: 10,
              //backgroundColor: "#ccc", //两边未选中的滑动条区域的颜色
              showDataShadow: false, //是否显示数据阴影 默认auto
              showDetail: false, //拖拽时候是否显示详细数值信息
              realtime: true, //是否实时更新
              filterMode: "filter", //y轴范围自适应
              // zlevel: 10,
              handleIcon:
                "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z", // 画一个圆形
            },
            //鼠标滚动
            {
              type: "inside",

              xAxisIndex: [0],

              zoomOnMouseWheel: false, //滚轮不触发缩放

              moveOnMouseMove: true, //鼠标移动触发平移

              moveOnMouseWheel: true, //鼠标滚轮触发平移
            },
          ],
          series: newData.series[this.index],
        };
      },
      // immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {},
};
</script>